<template>
  <view class="pending-sign-section">
    <view class="section-header">
      <text class="section-title">待签人员</text>
      <text class="section-subtitle">{{ getCurrentTime() }}</text>
    </view>
    
    <!-- 统计概览 -->
    <view class="stats-overview">
      <view class="overview-item">
        <text class="overview-label">总待签人数</text>
        <text class="overview-number">{{ totalPendingCount }}</text>
      </view>
      <view class="overview-item">
        <text class="overview-label">超时未签</text>
        <text class="overview-number overtime">{{ overtimeCount }}</text>
      </view>
      <view class="overview-item">
        <text class="overview-label">今日已签</text>
        <text class="overview-number signed">{{ todaySignedCount }}</text>
      </view>
    </view>
    
    <!-- 车场列表 -->
    <view class="parking-list">
      <view class="list-header">
        <text class="list-title">各车场待签情况</text>
        <text class="list-action" @click="handleViewAll">查看全部</text>
      </view>
      
      <view class="parking-items">
        <view 
          v-for="(item, index) in parkingStats" 
          :key="index" 
          class="parking-item"
          @click="handleParkingClick(item)"
        >
          <view class="parking-header">
            <view class="parking-info">
              <text class="parking-name">{{ item.parkingName }}</text>
              <text class="parking-location">{{ item.location }}</text>
            </view>
            <view class="parking-status" :class="item.statusClass">
              <text class="status-text">{{ item.statusText }}</text>
            </view>
          </view>
          
          <view class="parking-stats">
            <view class="stat-item">
              <text class="stat-label">待签人数</text>
              <text class="stat-value">{{ item.pendingCount }}人</text>
            </view>
            <view class="stat-item">
              <text class="stat-label">应签人数</text>
              <text class="stat-value">{{ item.totalCount }}人</text>
            </view>
            <view class="stat-item">
              <text class="stat-label">签到率</text>
              <text class="stat-value rate" :class="item.rateClass">{{ item.signRate }}%</text>
            </view>
          </view>
          
          <view class="parking-footer">
            <text class="update-time">{{ item.updateTime }}</text>
            <view class="arrow-icon"></view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'

const emit = defineEmits(['refresh', 'detail'])

const parkingStats = ref([])

// 获取当前时间
const getCurrentTime = () => {
  const now = new Date()
  const hours = now.getHours().toString().padStart(2, '0')
  const minutes = now.getMinutes().toString().padStart(2, '0')
  return `${hours}:${minutes}`
}

// 计算总待签人数
const totalPendingCount = computed(() => {
  return parkingStats.value.reduce((total, item) => total + item.pendingCount, 0)
})

// 计算超时未签人数
const overtimeCount = computed(() => {
  return parkingStats.value.reduce((total, item) => total + item.overtimeCount, 0)
})

// 计算今日已签人数
const todaySignedCount = computed(() => {
  return parkingStats.value.reduce((total, item) => total + item.signedCount, 0)
})

// 获取待签人员统计
const loadPendingSignStats = async () => {
  try {
    // 暂时使用模拟数据
    parkingStats.value = [
      {
        parkingName: '中心广场停车场',
        location: '市中心区域',
        pendingCount: 8,
        totalCount: 15,
        signedCount: 7,
        overtimeCount: 2,
        signRate: 47,
        statusText: '待签较多',
        statusClass: 'status-warning',
        rateClass: 'rate-low',
        updateTime: '5分钟前',
        parkingId: 'P001'
      },
      {
        parkingName: '商业街停车场',
        location: '商业区域',
        pendingCount: 3,
        totalCount: 12,
        signedCount: 9,
        overtimeCount: 0,
        signRate: 75,
        statusText: '正常',
        statusClass: 'status-normal',
        rateClass: 'rate-normal',
        updateTime: '3分钟前',
        parkingId: 'P002'
      },
      {
        parkingName: '火车站停车场',
        location: '交通枢纽',
        pendingCount: 12,
        totalCount: 20,
        signedCount: 8,
        overtimeCount: 5,
        signRate: 40,
        statusText: '紧急',
        statusClass: 'status-urgent',
        rateClass: 'rate-low',
        updateTime: '1分钟前',
        parkingId: 'P003'
      },
      {
        parkingName: '医院停车场',
        location: '医疗区域',
        pendingCount: 1,
        totalCount: 8,
        signedCount: 7,
        overtimeCount: 0,
        signRate: 88,
        statusText: '良好',
        statusClass: 'status-good',
        rateClass: 'rate-high',
        updateTime: '2分钟前',
        parkingId: 'P004'
      }
    ]
  } catch (error) {
    console.error('获取待签人员统计失败:', error)
    uni.showToast({
      title: '获取数据失败',
      icon: 'none'
    })
  }
}

// 处理车场点击
const handleParkingClick = (item) => {
  console.log('点击车场:', item)
  uni.navigateTo({
    url: `/pages/data-summary/detail/pending-sign?id=${item.parkingId}&name=${encodeURIComponent(item.parkingName)}`
  })
}

// 处理查看全部
const handleViewAll = () => {
  console.log('查看全部待签人员')
  emit('detail', { type: 'all' })
}

// 刷新数据方法（供父组件调用）
const refreshData = async () => {
  await loadPendingSignStats()
  emit('refresh')
}

// 暴露方法给父组件
defineExpose({
  refreshData
})

onMounted(() => {
  loadPendingSignStats()
})
</script>

<style scoped>
.pending-sign-section {
  margin-bottom: 30rpx;
  background: white;
  border-radius: 20rpx;
  padding: 30rpx;
  box-shadow: 0 8rpx 30rpx rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10rpx);
  border: 1rpx solid rgba(255, 255, 255, 0.2);
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30rpx;
}

.section-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  position: relative;
}

.section-title::after {
  content: '';
  position: absolute;
  bottom: -8rpx;
  left: 0;
  width: 60rpx;
  height: 4rpx;
  background: linear-gradient(90deg, #667eea, #764ba2);
  border-radius: 2rpx;
}

.section-subtitle {
  font-size: 28rpx;
  color: #999;
  background: #f8f9fa;
  padding: 8rpx 16rpx;
  border-radius: 20rpx;
  border: 1rpx solid #e9ecef;
}

/* 统计概览 */
.stats-overview {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20rpx;
  margin-bottom: 30rpx;
}

.overview-item {
  text-align: center;
  padding: 20rpx;
  background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
  border-radius: 12rpx;
  border: 1rpx solid #e9ecef;
}

.overview-label {
  font-size: 24rpx;
  color: #666;
  display: block;
  margin-bottom: 8rpx;
}

.overview-number {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  display: block;
}

.overview-number.overtime {
  color: #ff4d4f;
}

.overview-number.signed {
  color: #52c41a;
}

/* 车场列表 */
.list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.list-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
}

.list-action {
  font-size: 24rpx;
  color: #1890ff;
  padding: 8rpx 16rpx;
  border-radius: 16rpx;
  background: rgba(24, 144, 255, 0.1);
}

.parking-items {
  display: grid;
  gap: 16rpx;
}

.parking-item {
  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
  border-radius: 16rpx;
  padding: 20rpx;
  border: 1rpx solid #e9ecef;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.parking-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  transition: left 0.5s;
}

.parking-item:active {
  transform: scale(0.98);
}

.parking-item:hover::before {
  left: 100%;
}

.parking-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16rpx;
}

.parking-info {
  flex: 1;
}

.parking-name {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 4rpx;
}

.parking-location {
  font-size: 22rpx;
  color: #666;
  display: block;
}

.parking-status {
  padding: 4rpx 12rpx;
  border-radius: 12rpx;
  font-size: 20rpx;
}

.status-normal {
  background: rgba(82, 196, 26, 0.1);
  color: #52c41a;
}

.status-warning {
  background: rgba(250, 173, 20, 0.1);
  color: #faad14;
}

.status-urgent {
  background: rgba(255, 77, 79, 0.1);
  color: #ff4d4f;
}

.status-good {
  background: rgba(24, 144, 255, 0.1);
  color: #1890ff;
}

.parking-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16rpx;
  margin-bottom: 16rpx;
}

.stat-item {
  text-align: center;
}

.stat-label {
  font-size: 20rpx;
  color: #666;
  display: block;
  margin-bottom: 4rpx;
}

.stat-value {
  font-size: 24rpx;
  font-weight: bold;
  color: #333;
  display: block;
}

.stat-value.rate {
  font-size: 22rpx;
}

.rate-high {
  color: #52c41a;
}

.rate-normal {
  color: #1890ff;
}

.rate-low {
  color: #ff4d4f;
}

.parking-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.update-time {
  font-size: 20rpx;
  color: #999;
}

.arrow-icon {
  width: 16rpx;
  height: 16rpx;
  border-top: 2rpx solid #ccc;
  border-right: 2rpx solid #ccc;
  transform: rotate(45deg);
}

/* 响应式设计 */
@media (max-width: 750rpx) {
  .stats-overview {
    grid-template-columns: repeat(3, 1fr);
    gap: 12rpx;
  }
  
  .overview-item {
    padding: 16rpx;
  }
  
  .overview-number {
    font-size: 28rpx;
  }
  
  .parking-stats {
    grid-template-columns: repeat(3, 1fr);
    gap: 12rpx;
  }
}

/* 动画效果 */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20rpx);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.parking-item {
  animation: fadeInUp 0.4s ease-out;
}

.parking-item:nth-child(2) {
  animation-delay: 0.1s;
}

.parking-item:nth-child(3) {
  animation-delay: 0.2s;
}

.parking-item:nth-child(4) {
  animation-delay: 0.3s;
}
</style>